<template>
  <el-row>
    <el-col :span="24">
      <Search v-model:dataTable="tableInfo.dataTable" v-model:size="tableInfo.size" v-model:current="tableInfo.current" v-model:total="tableInfo.total" v-model:loadingTable="loadingTable"></Search>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24">
      <DataForm v-model:dataTable="tableInfo.dataTable" v-model:size="tableInfo.size" v-model:current="tableInfo.current" v-model:total="tableInfo.total" v-model:loadingTable="loadingTable"></DataForm>
    </el-col>
  </el-row>
  <el-backtop target=".el-main" />
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import Search from "./Search.vue";
import DataForm from "./DataForm.vue";

export default defineComponent({
  components: {
    Search,
    DataForm,
  },
  setup() {
    const tableInfo = ref({
      dataTable: [],
      size: 10,
      current: 1,
      total: 0
    });
    const loadingTable = ref(false);
    return {tableInfo, loadingTable}
  },
});
</script>
<style lang="scss" scoped>
    .el-row {
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
    }
</style>
